<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script type="text/javascript">
      function showAlert() {
        window.alert("  window.alert()");
      }
      function insertHTML(data) {
        var element=document.getElementById('html_content');
        element.innerHTML=data;
      }
      function overWriteAll() {
        document.write('这下信了吧！刷新一下！');
      }
    </script>
    <title>JavaScript输出</title>
  </head>
  <body>
    <h3>JavaScript输出</h3>
    <p>JavaScript没有任何打印或者输出的函数。</p>

    <h3>JavaScript显示数据</h3>
    <p>JavaScript可以通过不同的方式来显示数据</p>
    <ul>
      <li>使用 <strong>window.alert()</strong> 弹出警告框。</li>
      <li>使用 <strong>document.write()</strong> 方法将内容写到HTML文档中。</li>
      <li>使用 <strong>innerHTML</strong> 写入到HTML元素中。</li>
      <li>使用 <strong>console.log()</strong> 写入到浏览器的控制台。</li>
    </ul>

    <h3 onclick="showAlert()">使用 <strong>window.alert()</strong></h3>

    <h3>操作HTML元素</h3>
    <p id="html_content"></p>
    <button type="button" onclick="insertHTML('haha~')">haha~</button>

    <h3>写入HTML文档</h3>
    <p>出于测试目的，可以讲JavaScript直接写在HTML中。</p>
    <script type="text/javascript">
      document.write('<p>这段文字通过 <strong>document.write()</strong> 写入HTML中</p>');
    </script>
    <p onclick="overWriteAll()">如果在文档已完成加载后执行 <strong>document.write()</strong>，整个HTML页面将被覆盖，不信点我试试。</p>

    <h3>写到控制台</h3>
    <p>如果浏览器支持调试，可以使用 <strong>console.log()</strong> 在浏览器中显示JavaScript的值。</p>
    <p>浏览器中使用F12开启调试模式，在调试窗口中点击“Console”菜单</p>
    <script type="text/javascript">
      a=3;
      b=2;
      c=5;
      console.log('a+b-c='+(a+b-c));
    </script>
  </body>
</html>
